<script setup>
import { ref, defineProps } from 'vue'
import { getWYYMusicService } from '@/api/music'
import { useMusicCell } from '@/composables/musicCell.js'
const musicCell = useMusicCell()
// import { useRouter, useRoute } from 'vue-router'

// 路由参数对象
// const route = useRoute()
// const queryKey = computed(() => route.query.search)

const wYYMusicList = ref([
  {
    id: 1,
    name: '音乐名称',
    singer: '歌手'
    // ALBUM: '专辑',
    // market: '0', // 时长
    // img: '', // 封面
    // mp3: '324244'
  }
])

const props = defineProps({
  queryKey: String
})
// 搜索参数
const querySearch = ref({
  rid: 0,
  msg: props.queryKey
})

// 添加音乐 1.音乐的索引 2.是否立即播放
const onAddMusic = (index, isPlay) => {
  musicCell.addMusic({ rid: index + 1, msg: props.queryKey }, isPlay)
}
// 收藏
const onAddLike = (index) => {
  musicCell.addLike({ rid: index + 1, msg: props.queryKey }, [0])
}
// 更多
const emit = defineEmits(['show-more'])
const onShowMore = (index) => {
  emit('show-more', {
    ...wYYMusicList.value[index],
    rid: index + 1,
    msg: props.queryKey
  })
}

// 滚动加载音乐列表
const loading = ref(false)
const error = ref(false)
const finished = ref(false)

const onLoad = async () => {
  // 异步更新数据

  // querySearch.value.n = wYYMusicList.value.length + 1
  try {
    const musics = await getWYYMusicService(querySearch.value)
    if (querySearch.value.rid === 0) {
      wYYMusicList.value = musics.data.data
    } else {
      if (musics.data.mp3 === undefined) {
        // loading.value = false
        finished.value = true
      } else {
        wYYMusicList.value.push(musics.data)
        // loading.value = false
        error.value = true
      }
    }
    loading.value = false
    querySearch.value.rid = wYYMusicList.value.length + 1
  } catch (err) {
    error.value = true
    loading.value = false
  }
  // wYYMusicList.value.push(musics.data)
  // getWYYMusicService(querySearch.value)
  //   .then((res) => {
  //     // console.log(res.data.mp3)

  //     if (res.data.mp3 === undefined) {
  //       loading.value = false
  //       finished.value = true
  //       // console.log('结束')
  //     } else {
  //       wYYMusicList.value.push(res.data)
  //       error.value = true
  //     }
  //   })
  //   .catch(() => {
  //     loading.value = false
  //   })
  // //加载状态结束
  // loading.value = false
  // 数据全部加载完成
  if (wYYMusicList.value.length >= 20) {
    finished.value = true
  }
}

// const onDownloadFile = async (index) => {
//   musicCell.downloadFile({ rid: index + 1, msg: props.queryKey })
// }
</script>
<template>
  <van-list
    v-model:loading="loading"
    :finished="finished"
    finished-text="没有更多了"
    v-model:error="error"
    error-text="点击拉取数据"
    @load="onLoad"
  >
    <!-- :label="index < 10 ? item.singer : item.author" -->
    <van-cell
      clickable
      center
      v-for="(item, index) in wYYMusicList"
      :key="item.id"
      @click="onAddMusic(index, 1)"
    >
      <!-- 使用 title 插槽来自定义标题 -->
      <template #title>
        <!-- <span class="custom-title" style="padding-right: 5px">
          {{ item.name }}
        </span> -->
        <!-- <van-tag plain type="primary">{{ item.market }}</van-tag> -->
        <van-highlight
          :keywords="props.queryKey"
          :source-string="item.name"
          style="padding-right: 5px"
          tag="span"
        />
      </template>
      <!-- 使用 label 插槽来自定义标签 -->
      <template #label>
        <van-highlight
          :keywords="props.queryKey"
          :source-string="index < 10 ? item.singer : item.author"
          highlight-class="highLight-text"
        />
      </template>
      <!-- 使用 right-icon 插槽来自定义右侧图标 -->
      <template #right-icon>
        <div class="right-icon">
          <!-- 添加 -->
          <i>
            <van-icon
              class-prefix="my-icon"
              name="addNext"
              @click.stop="onAddMusic(index, 0)"
            />
          </i>
          <!-- 收藏 -->
          <i><van-icon @click.stop="onAddLike(index)" name="star-o" /></i>
          <!-- 更多 -->
          <i><van-icon name="ellipsis" @click.stop="onShowMore(index)" /></i>
        </div>
      </template>
    </van-cell>
  </van-list>
</template>
<style scoped>
/* 音乐列表 */

/* 引入第三方或自定义的字体图标样式 */
@font-face {
  font-family: 'my-icon';
  src:
    url('@/assets/iconfont/iconfont.woff2') format('woff2'),
    url('@/assets/iconfont/iconfont.woff') format('woff'),
    url('@/assets/iconfont/iconfont.ttf') format('truetype');
}

.my-icon {
  font-family: 'my-icon' !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.my-icon-add::before {
  content: '\e6a4';
}

/* 音乐卡片右边的图标 */
.right-icon {
  width: 40%;
  display: flex;
  align-content: space-between;
  justify-content: center;
}
.right-icon i {
  left: 6px;
  width: 40px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  font-size: 20px;
  color: #6d6b6b;
}
::v-deep .highLight-text {
  color: #80b4c6;
}
</style>
